<template>
  <div id="artists" v-loading="isLoading">
    <artists-class
      v-for="(item, index) in artistsClass"
      :key="index"
      :title="item.title"
      :classInfo="item.classInfo"
      :whichClass="index"
      class="last-border"
      @changeIndex="changeIndex"/>
    <artists-list
      :artistsList="artistsList"
      @imgLoad="imgLoad"
      :class="{ hidden: isLoading }"
      @handleArtistsClick="handleArtistsClick"/>
  </div>
</template>

<script>
import ArtistsClass from './childrenCpns/ArtistsClass.vue'
import ArtistsList from './childrenCpns/ArtistsList.vue'

export default {
  name: 'Artists',
  components: {
    ArtistsClass,
    ArtistsList
  },
  data () {
    return {
      queryInfo: {
        area: ['-1', '7', '96', '8', '16', '0'],
        type: ['-1', '1', '2', '3'],
        initial: ['-1', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0'],
        pagenum: 1,
        limit: 10
      },
      selectedIndex: [
        0, 0, 0
      ],
      // 存放歌手列表
      artistsList: [],
      // 还可以获取更多
      stillMore: true,
      // 分类数据
      artistsClass: [
        { title: '语种', classInfo: ['全部', '华语', '欧美', '日本', '韩国', '其他'] },
        { title: '分类', classInfo: ['全部', '男歌手', '女歌手', '乐队组合'] },
        { title: '筛选', classInfo: ['热门', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'] }
      ],
      // 正在加载
      isLoading: true,
      // 表示是否绑定事件总线
      isBindBusEvent: false
    }
  },
  created () {
    // this.artistsList = []
    this.getArtistsList()
    this.scrollUpdate()
    this.scrollUpdate()
    // setTimeout(() => {
    //   this.scrollUpdate()
    // }, 0)
  },
  methods: {
    // 1. 获取歌手分类列表
    async getArtistsList () {
      const result = await this.$http('/artist/list', {
        params: {
          area: this.queryInfo.area[this.selectedIndex[0]],
          type: this.queryInfo.type[this.selectedIndex[1]],
          initial: this.queryInfo.initial[this.selectedIndex[2]],
          offset: (this.queryInfo.pagenum - 1) * this.queryInfo.limit,
          limit: this.queryInfo.limit
        }
      })
      // console.log(result)
      // 获取失败
      if (result.status !== 200 || result.data.code !== 200) return this.$message.info('获取歌手列表失败')
      // 获取成功
      this.artistsList.push(...result.data.artists)
      this.stillMore = result.data.more
      // 判断是否最后一页是最后一页则解除绑定
      if (!this.stillMore) {
        this.$bus.$off('yEnd')
      }
    },
    // 2. 类别选择
    changeIndex (selectedIndex, whichClass) {
      this.selectedIndex[whichClass] = selectedIndex
      this.isLoading = true
      this.artistsList = []
      this.getArtistsList()
    },
    // 3. 图片加载完成
    imgLoad () {
      this.isLoading = false
      this.scrollUpdate()
      // 绑定事件总线
      if (!this.isBindBusEvent && this.stillMore) {
        this.$bus.$on('yEnd', () => {
          // if (this.isLoading) return false
          this.handleYEnd()
        })
        this.isBindBusEvent = true
      }
    },
    // 4. 处理滚动到底部
    handleYEnd () {
      this.queryInfo.pagenum = this.queryInfo.pagenum + 1
      this.getArtistsList()
    },
    // 5. emit一个scrollUpdate
    scrollUpdate () {
      this.$emit('scrollUpdate')
    },
    // 6. 处理歌手点击事件
    handleArtistsClick (id) {
      this.$router.push(`/artists/detail?id=${id}`)
    }
  }
}
</script>

<style scoped lang="less">
#artists {
  width: 100%;
  height: 100%;
  .last-border:nth-of-type(3) {
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e1e1e2;
  }
}
</style>

<style lang="less">
.el-loading-parent--relative {
  position: relative;
  .el-loading-mask {
    position: absolute;
    height: calc(100% - 210px);
    top: 210px;
    // bottom: 0;
    background-color: #fafafa;
    // background-color: red;
  }
}
</style>
